//1.先得到scroll 图片的父亲
var scroll = document.querySelector('#scroll')
//2.然后通过父亲获取子元素   img
var imgs = scroll.querySelectorAll('img')
//3.得到图片的宽度  
var imgWidth = scroll.clientWidth
//4.得到点的数组
var dots = scroll.querySelectorAll('.dot')
//得到上一页按钮
var prev = scroll.querySelector('#prev')
//得到下一页按钮
var next = scroll.querySelector('#next')
//定义一个变量 存储当前播放到的图片索引
var page = 0;
//得到图片数量
var size = imgs.length;
//定时器索引
var timer = null;
//页面初始化函数   让图片平行
function init() {
    //排列图片
    for (var index = 0; index < imgs.length; index++) {
        imgs[index].style.left = index * imgWidth + 'px'
    }
    dots[0].style.backgroundColor = '#fff'
}

function changeImg() {

    //切换图片
    for (var index = 0; index < imgs.length; index++) {
        imgs[index].style.left = (index - page) * imgWidth + 'px';

    }

    //改变点
    //所有的点背景颜色透明
    for (var i = 0, len = dots.length; i < len; i++) {
        dots[i].style.backgroundColor = 'transparent';
    }

    //让对应的播放到的点变白
    dots[page].style.backgroundColor = '#fff';
}


//自动播放 每隔一段时间让page值自动加1
function autoPlay() {
    timer = setInterval(function () {
        page++;
        if (page > size - 1) { page = 0 }
        changeImg()
    }, 2000)
}


//停止播放
function stopPlay() {
    if (timer) {
        clearInterval(timer)
    }
}

//轮播图开始
function start() {
    //初始化
    init();
    //自动播放
    autoPlay();
    //鼠标移入停止自动播放
    scroll.addEventListener('mouseover', function () {
        stopPlay();
    })
    //鼠标移入开始自动播放
    scroll.addEventListener('mouseout', function () {
        autoPlay();
    })
    //点击点切换到相应图片
    for (var i = 0; i < dots.length; i++) {
        dots[i].id = i;
        dots[i].addEventListener('click',function() {
            page = this.id;
            changeImg();
        })
    }

    //实现上一页
    prev.addEventListener('click',function() {
        //切换当前页-1
        page--;
        //索引
        if(page < 0) {page = size -1}
        //播放
        changeImg();
    })

    //实现下一页
    next.addEventListener('click', function() {
        //切换当前页+1
        page++;
        //索引
        if(page > size -1){page = 0}
        //播放
        changeImg();
    })
}

start();

